<template>
    <div class="star">
        <template v-for="(item, index) in new Array(all).fill(0).map((e, i) => {
            if(i <= n - 1){
                return 1
            }
            if(i === (n | 0)){
                return n === (n | 0) ? 0 : 2
            }
            return 0
        })">
            <svg v-if="item == 1" :key="index" :width="size" :height="size" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                    <g id="设计师端-表现师详情-评价" transform="translate(-316.000000, -475.000000)" fill="#FFBA5A">
                        <g id="分组-12" transform="translate(232.000000, 471.000000)">
                            <g id="分组-10">
                                <g id="分组-7" transform="translate(62.000000, 4.000000)">
                                    <path d="M37.8150587,7.08959002 C36.6851485,8.46746096 34.6726831,10.7524607 34.6726831,10.7524607 C34.6726831,10.7524607 34.9955093,13.2556635 35.1892856,14.9665618 C35.2753738,15.8391984 34.6404297,16.2181632 33.9301791,15.8736906 C32.5741843,15.1961907 30.5080122,14.1398236 30.0452445,13.8986713 C29.5717502,14.1283197 27.4947781,15.1732415 26.1280566,15.8506437 C25.407006,16.183671 24.7721169,15.8162297 24.8474235,14.943593 C25.0303998,13.2326948 25.3639528,10.7410154 25.3639528,10.7410154 C25.3639528,10.7410154 23.3300339,8.46746096 22.1893421,7.08959002 C21.7804094,6.58429711 22.049474,5.87238313 22.8458129,5.74613314 C24.4815256,5.43607459 27.0104838,4.94228558 27.0104838,4.94228558 C27.0104838,4.94228558 28.3987135,2.3932429 29.2704322,0.83158292 C29.7547265,-0.121405253 30.0882795,-0.00658104699 30.1421327,0.0163681692 C30.2927825,0.0623056639 30.5295388,0.257461892 30.8308567,0.83158292 C31.6918304,2.3932429 33.0585519,4.9423637 33.0585519,4.9423637 C33.0585519,4.9423637 35.5551834,5.43613318 37.1694428,5.74613314 C37.9549818,5.87246126 38.2132464,6.59580102 37.8151136,7.08959002 L37.8150587,7.08959002 Z" id="Fill-1"></path>
                                </g>
                            </g>
                        </g>
                    </g>
                </g>
            </svg>
            <svg v-if="item == 0" :key="index" :width="size" :height="size" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                    <g id="设计师端-表现师详情-评价" transform="translate(-640.000000, -523.000000)" fill="#E5E5E5">
                        <g id="分组-12" transform="translate(232.000000, 471.000000)">
                            <g id="分组-9" transform="translate(260.000000, 48.000000)">
                                <g id="分组-7" transform="translate(60.000000, 4.000000)">
                                    <path d="M103.815059,7.08959002 C102.685149,8.46746096 100.672683,10.7524607 100.672683,10.7524607 C100.672683,10.7524607 100.995509,13.2556635 101.189286,14.9665618 C101.275374,15.8391984 100.64043,16.2181632 99.9301791,15.8736906 C98.5741843,15.1961907 96.5080122,14.1398236 96.0452445,13.8986713 C95.5717502,14.1283197 93.4947781,15.1732415 92.1280566,15.8506437 C91.407006,16.183671 90.7721169,15.8162297 90.8474235,14.943593 C91.0303998,13.2326948 91.3639528,10.7410154 91.3639528,10.7410154 C91.3639528,10.7410154 89.3300339,8.46746096 88.1893421,7.08959002 C87.7804094,6.58429711 88.049474,5.87238313 88.8458129,5.74613314 C90.4815256,5.43607459 93.0104838,4.94228558 93.0104838,4.94228558 C93.0104838,4.94228558 94.3987135,2.3932429 95.2704322,0.83158292 C95.7547265,-0.121405253 96.0882795,-0.00658104699 96.1421327,0.0163681692 C96.2927825,0.0623056639 96.5295388,0.257461892 96.8308567,0.83158292 C97.6918304,2.3932429 99.0585519,4.9423637 99.0585519,4.9423637 C99.0585519,4.9423637 101.555183,5.43613318 103.169443,5.74613314 C103.954982,5.87246126 104.213246,6.59580102 103.815114,7.08959002 L103.815059,7.08959002 Z" id="Fill-1"></path>
                                </g>
                            </g>
                        </g>
                    </g>
                </g>
            </svg>
            <svg v-if="item == 2" :key="index" :width="size" :height="size" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                <defs>
                    <path d="M19.7688233,8.86198753 C18.3564356,10.5843262 15.8408539,13.4405759 15.8408539,13.4405759 C15.8408539,13.4405759 16.2443867,16.5695794 16.486607,18.7082022 C16.5942173,19.798998 15.8005372,20.272704 14.9127238,19.8421132 C13.2177304,18.9952383 10.6350152,17.6747795 10.0565557,17.3733391 C9.4646877,17.6603996 6.86847258,18.9665518 5.16007081,19.8133046 C4.25875754,20.2295888 3.46514607,19.7702871 3.55927932,18.6794913 C3.78799978,16.5408685 4.20494097,13.4262692 4.20494097,13.4262692 C4.20494097,13.4262692 1.66254242,10.5843262 0.236677685,8.86198753 C-0.274488278,8.23037139 0.0618424509,7.34047891 1.05726609,7.18266643 C3.10190706,6.79509323 6.26310472,6.17785697 6.26310472,6.17785697 C6.26310472,6.17785697 7.99839189,2.99155362 9.0880403,1.03947865 C9.69340816,-0.151756566 10.1103493,-0.00822630874 10.1776658,0.0204602114 C10.3659781,0.0778820799 10.6619235,0.321827365 11.0385709,1.03947865 C12.1147881,2.99155362 13.8231898,6.17795463 13.8231898,6.17795463 C13.8231898,6.17795463 16.9439793,6.79516647 18.9618035,7.18266643 C19.9437272,7.34057657 20.266558,8.24475127 19.768892,8.86198753 L19.7688233,8.86198753 Z" id="path-1"></path>
                </defs>
                <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                    <g id="设计师端-表现师详情-评价" transform="translate(-114.000000, -544.000000)">
                        <g id="分组-5" transform="translate(36.000000, 450.000000)">
                            <g id="分组-7" transform="translate(0.000000, 94.000000)">
                                <g id="分组-13" transform="translate(78.000000, 0.000000)">
                                    <mask id="mask-2" fill="white">
                                        <use xlink:href="#path-1"></use>
                                    </mask>
                                    <use id="Fill-1" fill="#E5E5E5" xlink:href="#path-1"></use>
                                    <rect id="矩形" fill="#FFBA5A" mask="url(#mask-2)" x="0" y="0" width="10" height="20"></rect>
                                </g>
                            </g>
                        </g>
                    </g>
                </g>
            </svg>
        </template>
    </div>
</template>
<script>
export default {
    props: ['n', 'all', 'size'],
    watch: {
        n(val){
            this.n = val
        },
        all(val){
            this.all = val
        },
        size(val){
            this.size = val
        }
    }
}
</script>
<style scoped>
.star>svg{
    display: inline-block;
    margin-right: .06rem;
}
</style>


